<template>
    <div class="user-task">
        <div class="select-box">
            <el-button @click="selectTask(3)">全部订单</el-button>
            <el-button @click="selectTask(0)">待处理订单</el-button>
            <el-button @click="selectTask(1)">处理中订单</el-button>
            <el-button @click="selectTask(2)">已完成订单</el-button>
            <el-button type="primary" @click="handleAdd">新增订单</el-button>
        </div>
        <div class="table-box">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="时间" width="150" />
                <el-table-column prop="position" label="地点" />
                <el-table-column prop="description" label="描述" />
                <el-table-column prop="name" label="报修人" />
                <el-table-column prop="phone" label="联系方式" />
                <el-table-column prop="workerPhone" label="维修人员联系方式" />
                <el-table-column prop="state" label="状态" />
                <el-table-column label="操作" width="180">
                    <template #default="{ row }">
                        <el-button type="text" @click="handleEdit(row)">修改/评价</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-box">
            <el-pagination v-model:current-page="pageNumber" v-model:page-size="pageSize" :page-sizes="[2, 5, 10, 20]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
    <AddTask ref="addTask" @task-added="load" />
    <AlrerTask ref="editTask" @alrer-task-success="load" />
</template>

<script>
import moment from 'moment';
import api from '@/api/axiosConfig';
import { ElMessage } from 'element-plus'
import { mapGetters } from 'vuex';
import AddTask from '@/components/AddTask.vue';
import AlrerTask from '@/components/AlrerTask.vue';


export default {
    name: 'ManagerTask',
    components: {
        AddTask,
        AlrerTask,
    },
    computed: {
        ...mapGetters('user', ['getUserId'])
    },
    data() {
        return {
            tableData: [],
            total: 0,
            pageNumber: 1,
            pageSize: 5,
            nowState: null,
        }
    },
    methods: {
        selectTask(state) {
            this.nowState = state;
            this.load()
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNumber) {
            this.pageNumber = pageNumber
            this.load()
        },
        formatDate(date) {
            return moment(date).format('YYYY-MM-DD');
        },
        ChangeState(state) {
            if (state == 0) {
                return "待处理"
            }
            else if (state == 1) {
                return "处理中"
            }
            else if (state == 2) {
                return "已完成"
            }
            else {
                return "未知状态"
            }
        },
        handleAdd() {
            this.$refs.addTask.show()
        },
        handleEdit(row) {
            this.$refs.editTask.setRow(row)
        },
        load() {
            if (this.nowState == 3) {
                this.nowState = null
            }
            if (this.searchDate)
                this.searchDate = this.formatDate(this.searchDate)
            console.log(this.searchName, this.searchDate, this.nowState)
            api.get('/task/user_search', {
                params: {
                    pageNum: this.pageNumber,
                    pageSize: this.pageSize,
                    id: this.getUserId,
                    state: this.nowState,
                },
                headers: {
                    'Authorization': `Bearer ${this.$store.getters['token/getToken']}`
                }
            })
                .then(res => {
                    console.log(res.data)
                    this.tableData = res.data.records
                    this.tableData.forEach(item => {
                        item.date = this.formatDate(item.date)
                        item.state = this.ChangeState(item.state)
                    })
                    this.total = res.data.total
                })
                .catch(err => {
                    console.log(err)
                    ElMessage({
                        message: '加载失败',
                        type: 'warning',
                    })
                })
        },
    },
    created() {
        this.load()
    }
};

</script>

<style scoped>
.select-box {
    display: flex;

    .el-input {
        width: 200px;
        margin-right: 10px;
    }

    .el-date-picker {
        width: 200px;
        margin-right: 10px;
    }

    .el-button {
        margin-left: 10px;
    }

    .el-select {
        width: 200px;
        margin-left: 50px;
    }
}

.table-box {
    margin-top: 10px;
    position: f;
}

.pagination-box {
    margin-top: 10px;
    text-align: right;
}
</style>